<template>
  <div>
    <div @click="showAlarm"  v-bind:class="className" >
        {{ alarmDescr }}{{ alarmType }}
    </div>
  <DlgAlarmDisplay :dialog-visible="isShowAlarm"  @res-alarm-display="handleResultAlarm"></DlgAlarmDisplay>
</div>
</template>

<script>

import DlgAlarmDisplay from './DlgAlarmDisplay.vue'

export default {
  name: 'ZoneAlarm',
  components: {
    DlgAlarmDisplay
  },

  computed:{
    // ...mapState('hg3000alarm', ['alarmdat'])
    // ...mapState('hg3000alarm', {
    //   alarmdat: state => state.alarmdat
    // })
    alarmDescr( ){
      return this.$store.state.hg3000alarm.alarmDescr;
    },
    alarmType( ){
      return this.$store.state.hg3000alarm.alarmType;
    },    
  },    

  watch: {
        alarmDescr( newv,  oldv ) {
          //console.log( "alarmType changed", this.alarmType )
          if( this.alarmType ===  1 ){
              this.className = "classWarn"
              return 
          }
          if( this.alarmType ===  2 ){
              this.className = "classError"
              return 
          } 
          this.className = "classNormal"
        },
    },


  data() {
    return {
      isShowAlarm: false ,
      className: "classNormal",
      
    }
  },

  created() {
  },

  mounted() {

  },

  unmounted() {

  },

  methods: {
    showAlarm( ){
      this.isShowAlarm = true 
      this.className = "classNormal"
    },

    handleResultAlarm(  ){
      this.isShowAlarm = false
    }

  }
}
</script>


<style scoped>
.classNormal{
  cursor: pointer;  
  color: white;
  background-color: lightgray;
}

.classWarn{
  cursor: pointer;  
  color: black;
  background-color: yellow;
}

.classError{
  cursor: pointer;  
  color: black;
  background-color: rgb(254, 0, 0);
}

</style>

